import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todos: []
  },
  getters: {
    total(state) {
      return state.todos.length
    },
    finished(state) {
      let sum = 0
      state.todos.forEach((item, index) => {
        if (item.finished) sum = sum + 1
      })
      return sum
    }
  },
  mutations: {
    INIT_TODO(state, todos) {
      state.todos = todos
    },
    ADD_TODO(state, todo) {
      state.todos.unshift(todo)
    },
    DEL_TODO(state, index) {
      state.todos.splice(index, 1)
    },
    CHANGE_TODO(state, index) {
      let todo = state.todos[index]
      todo.finished = ! todo.finished
    },
    saveTodo(state) {
      if (state.todos.length > 0) {
        localStorage.setItem('todos', JSON.stringify(state.todos))
      }
    },
    clearTodo(state) {
      if (localStorage.getItem('todos')) {
        localStorage.clear()
      }
    }
  },
  actions: {
    initTodo(context, todos) {
      context.commit('INIT_TODO', todos)
    },
    addTodo(context, todo) {
      context.commit('ADD_TODO', todo)
    },
    delTodo(context, todo) {
      context.commit('DEL_COMMIT', todo)
    },
    changeTodo(context, index) {
      context.commit('CHANGE_TODO', index)
    }
  }
})

export default store
